<template>
	<view class="index-content">
		<view class="info-content">
			<view class="content-top">
				<view class="form">
					<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType"
						style="margin-bottom: 30px;">
						<u-form-item label-width="150" :label-position="labelPosition" prop="oldPassword" label="旧密码"
							:required="true">
							<u-input :border="border" placeholder="请输入旧密码" v-model="model.oldPassword" type="password"
								clearable>
							</u-input>
						</u-form-item>
						<u-form-item label-width="150" :label-position="labelPosition" prop="newPassword" label="新密码"
							:required="true" style="margin-top: 20px;">
							<u-input :border="border" placeholder="请输入新密码" v-model="model.newPassword" type="password"
								clearable>
							</u-input>
						</u-form-item>
						<u-form-item label-width="150" :label-position="labelPosition" prop="checkNewPassword"
							label="确认密码" :required="true" style="margin-top: 20px;">
							<u-input :border="border" placeholder="请输入确认密码" v-model="model.checkNewPassword"
								type="password" clearable>
							</u-input>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<view class="btns">
				<u-button type="success" :loading="fetching" @click="goLogin" style="margin: 30rpx 0;width: 100%;">
					确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		editPasswd
	} from '@/api/user.js';
	export default {
		data() {
			return {
				fetching: false,
				password: true,
				tabIndex: 0,
				labelPosition: 'top',
				errorType: ['message'],
				border: false,
				model: {
					oldPassword: '',
					newPassword: '',
					checkNewPassword: ''
				},
				rules: {
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: 'change'
					}],
					newPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: 'change'
					}],
					checkNewPassword: [{
						required: true,
						message: '请输入确认密码',
						trigger: 'change'
					}]
				},
				//屏幕高度
				screenHeight: 0,
			}
		},
		onLoad() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			handleAdd() {
				uni.navigateTo({
					url: ""
				})
			},
			goLogin() {
				let that = this;
				that.$refs.uForm.validate(valid => {
					if (valid) {
						// 提交数据
						if (that.fetching) {
							return false;
						}
						that.fetching = true;
						// 显示loading状态
						uni.showLoading({
							mark: true,
							title: "提交中..."
						})
						editPasswd({
							userCode: uni.getStorageSync('usercode'), //登录账号
							oldPassword: that.model.oldPassword, //旧密码
							newPassword: that.model.newPassword, //新密码
							checkNewPassword: that.model.checkNewPassword //第二次新密码
						}).then((res) => {
							if (res && res.state == "ok") {
								uni.showToast({
									title: '修改密码成功，请使用新密码重新登录',
									icon: 'none',
									duration: 1500
								})
								setTimeout(() => {
									that.fetching = false;
									uni.hideLoading();
									uni.reLaunch({
										url: '/pages/auth/login/login'
									})
								}, 500)
							} else if (res && res.state == "fail") {
								that.fetching = false;
								uni.hideLoading();
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 3000
								})
							}
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEF0F4;
		font-size: 18px;
	}

	.form {
		margin-top: 35rpx;
		width: 100%;
		padding: 0 20rpx;
	}

	.index-content {
		width: 100%;
		height: 200px;
		background-image: linear-gradient(180deg, #4899F3 0%, rgba(72, 153, 243, 0.00) 100%);
	}

	.info-content {
		padding: 10px;
	}

	.content-top {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 4px;
		padding: 10px;
	}

	.content-top-one {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 4px;
		padding: 10px;
		margin-top: 10px;
	}

	.image-box {
		width: 120px;
		height: 120px;
	}

	.text-box {
		margin-top: 12px;
	}

	.account-fill-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.account-fill {
		font-weight: 500;
		font-weight: bold;
		font-size: 16px;
		color: #171A1D;
	}

	.account-fill-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 2px solid #EEF0F4;
	}

	.account-fill-content:last-child {
		border-bottom: none;
	}

	.account-fill-user {
		margin-top: 20px;
		font-size: 16px;
		color: #171A1D;
	}

	.account-fill-name {
		font-size: 14px;
		color: rgba(23, 26, 29, 0.60);
		margin-top: 10px;
	}

	.account-fill-image-box {
		width: 24px;
		height: 24px;
	}
</style>
